var chartDom = document.getElementById("echarts3.2");
var myChart = echarts.init(chartDom);
var online = 0;
var outline = 0;
var all = []
var option3_2

var colorArr = ["#FF8D44", "#1180F3"];
var colorAlpha = ["rgba(255, 141, 68, 0.3)", "rgba(17, 128, 243, 0.3)"];

function ajax3_2() {
  $.ajax({
    url: "/large-screen/monitorDevice/selectDeviceState",
    type: "GET",
    crossDomain: true,
    dataType: "json",
    async: false,
    success: function (res) {
      // console.log(res);
      res.data.forEach((item) => {
        if (item.state === "1") {
          online = item.count;
          all[0] = item.count;
        } else {
          outline = item.count;
          all[1] = item.count;
        }
      });
    },
    error: function (xhr, status) {
      console.log(status);
    },
  });
  option3_2 = {
    // grid: {
    //     left: 10,
    //     top: 50,
    //     // bottom: 10,
    //     right: 10,
    //     containLabel: true,
    // },
    tooltip: {
      trigger: "item",
      formatter: "{b} : {c} ({d}%)",
    },
  
    legend: {
      orient: "vertical",
      top: "center",
      right: "2%",
      icon: "rect",
      data: [
        { name: "在线", itemStyle: { color: colorArr[1] } },
        { name: "离线", itemStyle: { color: colorArr[0] } },
      ],
      formatter: function (name) {
        let value3;
        for (let i = 0; i < all.length; i++) {
          if (option3_2.series[0].data[i].name == name) {
            value3 = all[i];
          }
        }
        var arr3 = "{b|" + name + "}" + "{a|" + value3 + "}" + "{c|个}";
        return arr3;
      },
      textStyle: {
        /* color: "#fff",
        fontSize: 16, */
        rich: {
          a: {
            fontSize: 17,
            align: "right",
            color: "#fff",
          },
          b: {
            fontSize: 14,
            align: "left",
            color: "#fff",
            width: 100,
          },
          c: {
            fontSize: 17,
            align: "right",
            // verticalAlign: "bottom",
            color: "#fff",
          },
        },
      },
    },
  
    polar: {
      center: ["30%", "50%"],
    },
    angleAxis: {
      interval: 1,
      type: "category",
      data: [],
      z: 10,
      axisLine: {
        show: false,
        lineStyle: {
          color: "#0B4A6B",
          width: 1,
          type: "solid",
        },
      },
      axisLabel: {
        interval: 0,
        show: true,
        color: "#0B4A6B",
        margin: 8,
        fontSize: 16,
      },
    },
    radiusAxis: {
      min: 20,
      max: 120,
      interval: 20,
      axisLine: {
        show: false,
        lineStyle: {
          color: "#0B3E5E",
          width: 1,
          type: "solid",
        },
      },
      axisLabel: {
        formatter: "{value} %",
        show: false,
        padding: [0, 0, 20, 0],
        color: "#0B3E5E",
        fontSize: 16,
      },
      splitLine: {
        lineStyle: {
          color: "#07385e",
          width: 2,
          type: "dashed",
        },
      },
    },
    calculable: true,
    series: [
      {
        stack: "a",
        type: "pie",
        center: ["30%", "50%"],
        radius: ["40%", "80%"],
        roseType: "radius",
        zlevel: 10,
        startAngle: 100,
        label: {
          show: false,
          // normal: {
          //     formatter: ["{b|{b}}", "{d|{d}%}"].join("\n"),
          //     rich: {
          //         b: {
          //             color: "#3bd2fe",
          //             fontSize: 14,
          //             lineHeight: 20,
          //         },
          //         d: {
          //             color: "#d0fffc",
          //             fontSize: 14,
          //             height: 20,
          //         },
          //     },
          // },
        },
        data: [
          {
            value: online,
            name: "在线",
            itemStyle: {
              borderColor: colorArr[1],
              borderWidth: 2,
              color: colorAlpha[1],
            },
          },
          {
            value: outline,
            name: "离线",
            itemStyle: {
              borderColor: colorArr[0],
              borderWidth: 2,
              color: colorAlpha[0],
            },
          },
        ],
      },
    ],
  };
  option3_2 && myChart.setOption(option3_2);
}
ajax3_2()

setInterval(() => {
  ajax3_2()
}, 7200000)
